<!--我发布的 - 需求-->
<template>
	<view>
		<view class="c_xuan flex flex-row white">
			<view 
			v-for="(item,index) in category"
			:key="index"
			@click="tabsChange(item.name)" :class="[tabsTitleKey == item.name ? 'on' : '']" class="c_tablist"><text>{{ item.title }}</text></view>
		</view>


		<zhaochengguo 
		@update="resetReq(true); getData()"
		:apiName="detailApiName"
		:keytype="tabsTitleKey"
		:list="list" v-if="list.length"></zhaochengguo>

		<bl-list-layout 
		btn-color="white" 
		@restart-load="resetReq(true); getData()" 
		:status="status"
		:list-len="list.length">
		</bl-list-layout>

		
	</view>
</template>

<script lang="ts" setup>
import { ref,computed } from "vue"
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from "@dcloudio/uni-app";
import blListLayout from "@/components/bl-list-layout.vue";
import { apiUr, useReqList } from "@/libs/api";
import zhaochengguo from "./components/zhaochengguo.vue";

const { status, resetReq, actionHttp, list, setOptions,banner } = useReqList();
const category = [
	{ title: "需求", name: "demand" },
	{ title: "服务", name: "service" },
	{ title: "成果", name: "achieved" },
	{ title: "投资", name: "investment" },
	{ title: "团队", name: "team" },
	{ title: "融资", name: "financing" },
]

const tabsTitleKey = ref("demand")//1全部,2通知,3热点新闻,4热门专题

const detailApiName = computed(()=>{
	if(tabsTitleKey.value == 'achieved') return 'achievedDetail'
	if(tabsTitleKey.value == 'service') return 'serviceDetail'
	if(tabsTitleKey.value == 'demand') return 'demandDetail'
	if(tabsTitleKey.value == 'investment') return 'financingDetail'
	if(tabsTitleKey.value == 'team') return 'teamDetail'
	if(tabsTitleKey.value == 'financing') return 'financingDetail'
	return 'achievedDetail'
})

function tabsChange(key: string) {
	tabsTitleKey.value = key;
	resetReq(true);
	getData()

}


onLoad(async () => {
	getData()
})

onPullDownRefresh(() => {
	if (status.isLoading) {
		uni.stopPullDownRefresh();
		return
	}
	resetReq(true);
	getData()
})
onReachBottom(() => {
	if (status.isLoading || !status.isMore) return;
	getData()
})

function getData() {
	uni.showLoading({ title: "...", mask: true })
	actionHttp(apiUr.contentList(), { type: tabsTitleKey.value }).then(() => {
		uni.stopPullDownRefresh();
		uni.hideLoading()
	})
}


</script>

<style>
page {
	background: #F7F7F7;
}
</style>
<style lang="less" scoped>
	.c_xuan {
		gap: 12rpx;
		justify-content: space-around;
		height: 64rpx;
		margin-bottom: 16rpx;
		padding-bottom: 15rpx;
	
		.c_tablist {
			font-size: 30rpx;
			color: #484848;
			height: 100%;
			padding: 0 24rpx;
			text {
				display: block;
				position: relative;
				height: 100%;
			}
	
			&.on {
				color: #0073FF;
				font-weight: bold;
			}
	
			&.on text::after {
				content: " ";
				display: block;
				position: absolute;
				width: 100%;
				height: 2px;
				border-radius: 2px;
				background-color: #0073FF;
				left: 0;
				bottom: 0;
			}
		}
	}
	.c_textlist{
		border-radius: 6rpx;
		color: #ffffff;
		font-size: 26rpx;
		padding: 8rpx 16rpx;
	}
</style>